<template>
  <div>
    <div id="questionTime" style="width: 100%; height: 350px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {reqGetMonthQuestion} from "@/api/mistake";

let questionTimeOption = {
  title: {
    text: '每月新增错题趋势图'
  },
  xAxis: {
    type: 'category',
    data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [15, 23, 22, 21, 13, 14, 26],
      type: 'line',
      label: {
        normal: {
          show: true,
        }
      }
    }
  ]
}

export default {
  data() {
    return {
      questionTimeChart: {},
    }
  },
  mounted() {
    this.initChart()
    this.getData()
  },
  methods: {
    //请求数据
    async getData() {
      let res=await reqGetMonthQuestion()
        if (res.code === 1) {
          this.questionTimeChart.setOption({
            xAxis: {
              data: res.data.map(item => item.createTime)
            },
            series: [
              {
                data: res.data.map(item => item.count)
              }
            ]
          })
        } else {
          this.$message.error(res.msg)
        }
    },
    //初始化图表
    initChart() {
        this.questionTimeChart = echarts.init(document.getElementById('questionTime'));
        this.questionTimeChart.setOption(questionTimeOption)
    }
  }
}
</script>

<style scoped>

</style>
